<template>
  <van-watermark v-if="user.shopName" :content="user.shopName" :width="200" :gap-x="20" opacity="0.5"></van-watermark>
  <Header :title="info.title" />
  <div v-if="isStqb" class="userBox_placeholder">
    <div class="userBox" v-if="isStqb">
      <van-image round class="avatar" :src="user.info.wx_headpic" fit="cover" />
      <div class="flex1">
        <p class="shopName">{{ user.info.shop_name || user.info.member_list_username }}</p>
        <p class="desc">专业分析，诚信服务</p>
      </div>
      <div class="more" @click="redirect('/match', '更多分析')">
        <span>更多分析</span>
        <van-icon name="arrow" size="4vw" color="#FE673A" />
      </div>
    </div>
  </div>
  <div class="detailPage">
    <van-image class="thumbnail" :src="`${globe.staticDomain}/${info.image}`" fit="cover" v-if="info.image" />
    <div class="content" v-html="info.content" v-if="info.content" @click="handleImageClick"></div>
    <van-image class="footImg" :src="getImgUrl('computer.jpg')" @click="redirect('/calculator', '计算器')" />
  </div>
  <van-notify v-model:show="show" position="bottom" color="#F96235" background="#FFEEE8" class-name="notice">
    <span class="notify_text">分析助手仅提供赛事数据分析整理，不做任何引导</span>
    <van-icon name="close" class="close" @click="show = false" />
  </van-notify>
  <div class="noticeHolder" v-show="show"></div>
  <div class="fixedAd" @click="redirect('/match', '更多分析')"></div>
  <!-- 特殊店铺广告提示 -->
  <template v-if="showFixedTip && user.homeAdUrl">
    <van-image :class="['fixedTip', { 'moveUp': show }]" src="/ad.gif" fit="cover" @click="backWenCai()" />
    <div class="fixedTipHolder van-safe-area-bottom"></div>
  </template>
</template>

<script setup>
import { articleDetail } from '@/api/calc';
import { useRouter, useRoute } from 'vue-router'
import { useUserStore, useGlobeStore } from '@/stores'
import { getImgUrl } from "@/utils/helper"

const route = useRoute()
const router = useRouter()
const user = useUserStore()
const globe = useGlobeStore();
const info = ref({});
const show = ref(true);
const { id, type } = route.params;
const isStqb = ['injury', 'intelligence'].includes(type); // 是伤停情报
const showFixedTip = computed(() => user.shopUuid.includes(user.i));

function redirect(path, label) {
  router.push(path);
  user.log({ type: 'event', action: 'click', opt_label: label, target_url: path});
}

function handleImageClick(e){
  if (e.target && e.target.nodeName === 'IMG') {
    const imgSrc = e.target.currentSrc;
    showImagePreview([imgSrc]); // 触发预览逻辑
  }
};

onMounted(()=>{
  articleDetail({ id }).then(res => {
    info.value = res;
    const typeName = isStqb ? '伤停情报' : '深度解读';
    // 更新分享标题
    document.title = `${typeName}-${info.value.title}`;
  })
})
onBeforeUnmount(()=>{
  user.updateShareInfo();
})
</script>

<style lang="less" scoped>
.userBox_placeholder{
  height: 76px;
}
.userBox {
  width: 100%;
  height: 76px;
  background: linear-gradient(to bottom, #FFEFEF, #FFFFFF);
  display: flex;
  align-items: center;
  padding: 16px 18px;
  position: fixed;
  top: 46px;
  left: 0;
  .avatar{
    width: 44px;
    height: 44px;
    margin-right: 10px;
  }
  .shopName{
    color: #1D2129;
    font-size: 16px;
    font-weight: 700;
  }
  .desc{
    font-size: 13px;
    color: #86909C;
  }
  .flex1{
    flex: 1;
  }
  .more{
    color: #FE673A;
    font-size: 14px;
  }
}
.detailPage{
  // padding: 16px 16px 46px;
  padding: 16px 16px;
  color: #1D2129;
  .title{
    position: relative;
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 700;
    &:before{
      content: "";
      position: absolute;
      bottom: 5px;
      left: 0;
      width: 50px;
      height: 4px;
      background: linear-gradient(90deg, #f96235 0%, #ffffff 100%);
      z-index: 0;
    }
    span{
      position: relative;
      z-index: 1;
    }
  }
  p{
    font-size: 14px;
    line-height: 22px;
  }
  .footImg{
    display: block;
    width: 100%;
    margin-top: 10px;
    border-radius: 10px;
    overflow: hidden;
  }
}
.notice {
  .notify_text{
    font-size: 12px!important;
  }
  .close {
    font-size: 20px!important;
    margin-left: 10px;
  }
}
.noticeHolder{
  height: 36px;
}
.fixedAd{
  width: 60px;
  height: 60px;
  background: url("@/assets/img/more.png") no-repeat;
  background-size: contain;
  position: fixed;
  right: 10px;
  bottom: 200px;
}
.fixedTip {
  position: fixed;
  left: 0px;
  bottom: 0;
  width: 100%;
  height: 104px;
  z-index: 2;
  transition: all 500ms;
  &.moveUp{
    bottom: 36px;
  }
}
.fixedTipHolder {
  height: 104px;
}
</style>
